굳이, 외부로부터 푸시를 이용하고 싶지 않을때, local push를 사용한다.

  • plugin 인스톨
1
2
$ ionic cordova plugin add de.appplant.cordova.plugin.local-notification
$ npm install --save @ionic-native/local-notifications
  • 앱 모듈에 추가
1
2
3
4
5
6
7
8
9
10
import { LocalNotifications } from '@ionic-native/local-notifications';

@NgModule({
  declarations: [
    ...
    LocalNotifications,
    ...
  ]
})
export class AppModule { }
  • home.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
import { Component } from '@angular/core';
import { NavController, AlertController, Platform } from 'ionic-angular';

import { LocalNotifications } from '@ionic-native/local-notifications';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController, private plt: Platform, private local: LocalNotifications, private alertCtrl: AlertController) {
    this.plt.ready().then(rdy => {
      this.local.on('click', (notification, state) => {
        let alert = this.alertCtrl.create({
          title: notification.title,
          subTitle: json.myData
        });
        alert.present();
      });
    });
  }
  
  ionViewDidLoad() {
    if (this.platform.is('cordova')) {
      this.platform.ready().then(() => {
        this.localNotifications.hasPermission().then(function (granted) {
          if (!granted) {
            // IOS10의 권한 설정
            this.localNotifications.registerPermission();
          }
        });
      });
    }
  }

  scheduleNotification() {
    this.local.schedule({
      id: 1,
      title: 'Attention Users!',
      text: 'Emirhan notification',
      at: new Date(new Date().getTime() + 5 * 1000),
      data: { myData: 'My hidden message this is.' }
    });
    alert(JSON.stringify(this.local.getAll()));
  }
}
  • home.html
1
2
3
4
5
6
7
8
9
10
11
<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button full (click)="scheduleNotification()">Schedule!</button>
</ion-content>

푸시가 오는 것이 확인된다. 블루스택으로 테스트 할경우, 푸시가 오지 않는 경우가 있으니 주의할 것.

Reference

https://ionicframework.com/docs/native/local-notifications/